<template>
  <div>
    <el-row>
      <el-col :span="16">
        <el-row>
          <el-col :span="24">
            <el-carousel indicator-position="outside">
              <el-carousel-item v-for="item in 4" :key="item">
                <h3>{{ item }}</h3>
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <list></list>
          </el-col>
        </el-row>
        
      </el-col>
      <el-col :span="8">
        推荐 
        <button @click="login">login</button>
        <button @click="addCount">count+</button>
        <button @click="subCount">count-</button>
        <p>访问state：{{this.$store.state.count}}</p>
        <p>访问getters：{{this.$store.getters.getterAge}}</p>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// @ is an alias to /src
import List from "@/components/List.vue";
export default {
  name: "home",
  components: {
    List
  },
  methods:{
    login(){
      this.$store.dispatch('login',{username:'user',password:'123456'});
    },
    addCount(){
      this.$store.commit('addCount');
    },
    subCount(){
      this.$store.commit('subCount',2);
    }
  }
};
</script>

<style>
.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
